﻿<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="images/index.css">
<link rel="prefetch" href="images/i8.png">
<link rel="prefetch" href="images/i9.png">
<link rel="prefetch" href="images/i10.png">
<link rel="prefetch" href="images/i11.png">
<title>水果忍者网页版</title>
<style>
	#h-score {
		position: absolute;
		z-index: 99;
		white-space: nowrap;
		width: 95%;
		text-align: center;
		margin: 15px 1%;
	}
	#h-score img {
		height: 40px;
		vertical-align: middle;
	}
	#h-score > span {
		display: inline-block;
		margin-left: 9%;
	}
	#h-score > span:nth-of-type(2) {
		margin-left: 13%;
	}
	#h-score > span span {
		color: white;
		text-align: right;
		display: inline-block;
		width: 30px;
		margin-left: -50px;
		margin-top: -1px;
		vertical-align: middle;
	}
	.hidden {
		display: none;
	}
	#h-result {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.7);
		z-index: 999;
	}
	#result-bg {
		width: 90%;
    left: 5%;
    top: 0;
    position: absolute;
	}
	.lose #result-bg {
		width: 80%;
		left: 10%;
	}
	.lose div {
		bottom: 20% !important;
	}
	#h-result div {
		display: block;
    position: absolute;
    width: 80%;
    height: 8%;
    left: 10%;
    bottom: 23%;
    text-align: center;
	}
	#h-result div img {
		height: 100%;
	}
	#h-result div img:last-child {
		margin-left: 10px;
	}
</style>
</head>
<body>
<div id="extra"></div>
<canvas id="view"></canvas>
<div id="h-score" class="hidden">
	<img id="back" src="images/i5.png" /><!--
	--><span>
		<img src="images/i6.png" />
		<span id="time-txt">0</span>
	</span><!--
	--><span>
		<img src="images/i7.png" />
		<span id="score-txt">0</span>
	</span>
</div>
<div id="h-result" class="hidden">
	<img id="result-bg" src="images/i10.png" />
	<div>
		<img id="share" src="images/i9.png" />
		<img id="retry" src="images/i8.png" />
	</div>
</div>
<script>
	var canvas = document.getElementById("view");
	canvas.width = window.screen.width;
  canvas.height = window.screen.height;

	window.onGameOver = function() {
		var score = +document.getElementById("score-txt").innerHTML;
		if (score > 5) {
			document.getElementById("h-result").className = "";
			document.getElementById("result-bg").src = "images/i10.png";
		} else {
			document.getElementById("h-result").className = "lose";
			document.getElementById("result-bg").src = "images/i11.png";
		}
	};

	document.getElementById("retry").onclick = function() {
		window.state("click-enable").on();
		//window.location.href=window.location.href+"?id="+10000*Math.random();
	};
	document.getElementById("back").onclick = function() {
		window.game.gameOver(true);
		//window.timerStop();
		//window.location.href=window.location.href+"?id="+10000*Math.random();
	};

	//var timerId = null;
	var timeCount = 30;
	window.onStart = function() {
		timeCount = 30;
		document.getElementById("time-txt").innerHTML = timeCount;
		document.getElementById("score-txt").innerHTML = "0";
		/*timerId = setInterval(function() {
			timeCount--;
			if (timeCount >= 0)
				document.getElementById("time-txt").innerHTML = timeCount;
			if (timeCount <= 0) {
				window.game.gameOver();
				window.timerStop();
				return;
			}
		}, 1000);*/
	};
	/*window.timerStop = function() {
		if (timerId)
			clearInterval(timerId);
	}*/
	window.onBarbette = function() {
		timeCount--;
		if (timeCount >= 0)
			document.getElementById("time-txt").innerHTML = timeCount;
		if (timeCount <= 0) {
			window.game.gameOver();
			return;
		}
	};

</script>
<script src="scripts/all.js"></script>
</body>
</html>